<ul>

    <li class="active"><a href="">First</a></li>

    <li><a href="">Second</a></li>

    <li><a href="">Third</a></li>

  </ul>

</nav>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

* {

  box-sizing: border-box;

}

​

body {

  background: #1A1E23;

  font-family: "Lato", sans-serif;

  -webkit-font-smoothing: antialiased;

}

​

nav {

  position: relative;

  padding-bottom: 12px;

}

nav .line {

  height: 2px;

  position: absolute;

  bottom: 0;

  margin: 10px 0 0 0;

  background: #FF1847;

}

nav ul {

  padding: 0;

  margin: 0;

  list-style: none;

  display: flex;

}

nav ul li {

  margin: 0 40px 0 0;

  opacity: 0.4;

  transition: all 0.4s ease;

}

nav ul li:hover {

  opacity: 0.7;

}

nav ul li.active {

  opacity: 1;

}

nav ul li:last-child {

  margin-right: 0;

}

nav ul li a {

  text-decoration: none;

  color: #fff;

  text-transform: uppercase;

  display: block;

  font-weight: 600;

  letter-spacing: 0.2em;

  font-size: 14px;

}

​

body {

  display: flex;

  justify-content: center;

  align-items: center;

  min-height: 100vh;

}

var line = $('<div />').addClass('line');

​

line.appendTo(nav);

​

var active = nav.find('.active');

var pos = 0;

var wid = 0;

​

if(active.length) {

  pos = active.position().left;

  wid = active.width();

  line.css({

    left: pos,

    width: wid

  });

}

​

nav.find('ul li a').click(function(e) {

  e.preventDefault();

  if(!$(this).parent().hasClass('active') && !nav.hasClass('animate')) {

    nav.addClass('animate');

​

    var _this = $(this);

​

    nav.find('ul li').removeClass('active');

​

    var position = _this.parent().position();

    var width = _this.parent().width();

​

    if(position.left >= pos) {

      line.animate({

        width: ((position.left - pos) + width)

      }, 300, function() {

        line.animate({

          width: width,

          left: position.left

        }, 150, function() {

          nav.removeClass('animate');

        });

        _this.parent().addClass('active');

      });

    } else {

      line.animate({

        left: position.left,

        width: ((pos - position.left) + wid)

      }, 300, function() {

        line.animate({

          width: width

        }, 150, function() {

          nav.removeClass('animate');

        });

        _this.parent().addClass('active');

      });

    }

​

    pos = position.left;

    wid = width;

  }

});